<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                        unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="兑换方式" v-model="formInline.type" style="width:100px;">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="彩票" value="1"></el-option>
                        <el-option label="积分" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="订单状态" v-model="formInline.status" style="width:100px;">
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="兑换成功" value="1"></el-option>
                        <el-option label="已退货" value="2"></el-option>
                        <el-option label="兑换失败" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.name" placeholder="订单编号/神采编号/礼品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
                <el-table-column align="center" prop="trade_no" label="订单编号"></el-table-column>
                <el-table-column align="center" label="会员卡号">
                    <template slot-scope="scope">
                        {{scope.row.card_no?scope.row.card_no:'-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户姓名">
                    <template slot-scope="scope">
                        {{scope.row.user_name?scope.row.user_name:'-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="用户等级" prop="grade">
                    <!-- <template slot-scope="scope">
                        {{scope.row.grade?scope.row.grade:'-'}}
                    </template> -->
                </el-table-column>
                <el-table-column align="center" prop="create_time" label="兑换时间"></el-table-column>
                <el-table-column align="center" prop="gift_name" label="兑换礼品名称"></el-table-column>
                <el-table-column align="center" prop="no_obsolete" label="神采礼品编号"></el-table-column>
                <el-table-column align="center" label="兑换方式">
                    <template slot-scope="scope">
                        {{scope.row.type_id==0?'彩票兑换':'积分兑换'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="num" label="兑换数量"></el-table-column>
                <el-table-column align="center" prop="time" label="消耗票数/积分">
                    <template slot-scope="scope">
                        {{scope.row.type_id==0?scope.row.total_tickets+' 票':scope.row.total_scores+' 分'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="订单状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.return_id==0&&scope.row.stock_status==1" class="success">兑换成功</span>
                        <span v-if="scope.row.return_id==0&&scope.row.stock_status==0" class="danger">兑换失败</span>
                        <el-button v-if="scope.row.return_id*1 > 0" type="text" @click="showReturn(scope.row)">
                            已退货
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 退货详情弹框 -->
            <el-dialog :close-on-click-modal="false" width="540px" title="退货详情" center :visible.sync="returnDialog">
                <div style="width:300px;margin:0 auto">
                    <p>退货时间：{{returnInfo.return_time}}</p>
                    <p>退货礼品名称：{{returnInfo.gift_name}}</p>
                    <p>退货礼品编号：{{returnInfo.no_obsolete}}</p>
                    <p>退货数量:{{returnInfo.return_num}}</p>
                    <p>返还{{returnInfo.type_id==0?'票数：'+returnInfo.ticket_num_return:'积分：'+returnInfo.score_num_return}}
                    </p>
                    <p>操作员工：{{returnInfo.return_employee}}</p>
                    <p>退货原因：{{ returnInfo.reason==0?'其他': returnInfo.reason==1 ?'兑换其他礼品':'礼品质量问题'}}</p>
                    <p>备注：{{returnInfo.remark?returnInfo.remark:'-'}}</p>
                </div>
            </el-dialog>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        getBrandList,
        getStoreList,
    } from "@/api/member/gift_change_detail";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils'
    export default {
        data() {
            return {
                list: [],
                returnDialog: false,
                listLoading: false,
                totalDataNumber: 1,
                currentPage: 1,
                brandList: [],
                storeList: null,
                returnInfo: {},
                formInline: {
                    store_id: '',
                    begin_time: '',
                    end_time: '',
                    name: '',
                    type: '',
                    status: '',
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            showReturn(row) {
                this.returnInfo = row;
                this.returnDialog = true;
            },
            getBrand() {
                getBrandList({ org: 1, category_id: 303 }).then(response => {
                    this.brandList = response;
                    this.formInline.brand = response[0].id
                    this.getStore()
                });
            },
            getStore() {
                getStoreList({ brand: this.formInline.brand, category_id: 303 }).then(response => {
                    this.storeList = response;
                     let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else { 
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.begin_time = this.pickerDate ? this.pickerDate[0] : '';
                    this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response * 20;
                    getList(this.formInline).then(response => {
                        response.forEach(val=>{
                            val.grade=val.card_type_id?(val.card_type_id==0?"普通会员卡":val.card_type_id==1?"精英会员卡":"临时卡"):"-";
                        })
                        this.list = response;
                        this.listLoading = false;
                    });
                }).catch(res=>{
                    //console.log(res,999)
                    this.listLoading = false;
                });
            },
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    response.forEach(val=>{
                        val.grade=val.card_type_id?(val.card_type_id==0?"普通会员卡":val.card_type_id==1?"精英会员卡":"临时卡"):"-";
                    })
                    this.list = response;
                    this.listLoading = false;
                });
            }
        }
    }
</script>